<template>
  <div
    v-loading="columnItem.optionLoading"
    :element-loading-spinner="loadingSpinner"
    element-loading-svg-view-box="0,0, 1024, 1024"
    :style="`text-align:${_info.align};color:${_info.value_color};`"
  >
    {{ showText ?? DEFAULT_TEXT }}
  </div>
</template>

<script setup>
import { DEFAULT_TEXT } from '@/utils/const';
import { isArray, flatOptionsObj } from '../const';
import { formatNumberWithCommas } from '@/utils';
import { loadingSpinner } from '@/assets/js/loadingIcon.js';

const props = defineProps({
  columnInfo: {
    type: Object,
    default: () => {}
  },
  columnItem: {
    type: Object,
    default: () => {}
  }
});

const _info = computed(() => props.columnInfo || {});
const _rules = computed(() => props.columnInfo.rules || {});

// 文本显示
const optionsTypes = ['select'];
const showText = computed(() => {
  let value = _info.value.value;
  // 全部处理成数组 和 空处理
  if (!isArray(value)) value = [value];
  value?.forEach((item, index) => {
    if (_rules.value?.decimal && item) {
      value[index] = Number(item).toFixed(_rules.value.decimal);
    }
    // 千分符处理
    if (_rules.value.thousands_separator && item) {
      value[index] = formatNumberWithCommas(value[index]);
    }
  });
  if (
    !value.length ||
    (value.length === 1 && ['', undefined, null].includes(value[0]))
  ) {
    return undefined;
  }

  if (optionsTypes.includes(_info.value.field_type)) {
    const optionsObj = {};
    flatOptionsObj(props.columnItem.options || [], optionsObj);
    const newValue = [];
    value.forEach(item => {
      if (optionsObj[item]) newValue.push(optionsObj[item]?.name);
    });
    if (!newValue.length) return undefined;
    return newValue.join('、');
  }
  return value.join('、');
});
</script>

<style lang="scss" scoped></style>
